<template>
  <div class="loginglobal">
    <div class="loginform">
      <div class="formtitle">鲸云网盘</div>
      <Form :model="formLeft" label-position="left" :rules="rules" ref="formValidate" class="labell" :label-width="100">
        <FormItem prop="username">
          <Input v-model="formLeft.username" placeholder="请输入账号"></Input>
        </FormItem>
        <FormItem prop="password">
          <Input v-model="formLeft.password" type="password" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem prop="repassword" v-if="type == 'register'">
          <Input v-model="formLeft.repassword" type="password" placeholder="请输入确认密码"></Input>
        </FormItem>
      </Form>
      <Button type="primary" style="width: 100%" @click="handleSubmit('formValidate')">{{
        type == "register" ? "注册" : "登录"
      }}</Button>
      <div class="texttip">
        <span @click="register()">{{
          type == "register" ? "已有账号？去登录" : "注册"
        }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";

import { useRouter, useRoute } from 'vue-router'
import service from "../utils/request";
import { Message } from "view-ui-plus";
const type = ref("login");
const router = useRouter()
let rules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名...",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码...",
      trigger: "blur",
    },
  ],
});
const formLeft = reactive({
  username: "",
  password: "",
  repassword: "",
});
const formValidate = ref();
const handleSubmit = (name) => {
  formValidate.value.validate(async (valid) => {
    if (valid) {
      if (type.value == 'register') {
        if (formLeft.password !== formLeft.repassword) {
          Message.warning("两次输入密码不一致")
        } else {
          const res = await service.post("/user/reg", {
            username: formLeft.username,
            password: formLeft.password
          })
          console.log(res)
          if (res.code == 200) {
            Message.success("注册成功")

            type.value = 'login'
          }

        }
        // type.value='login'
      } else {
        const res = await service.post("/user/login", {
          username: formLeft.username,
          password: formLeft.password
        })
        console.log(res)
        if (res.code == 200) {
          window.localStorage.setItem("userinfo", JSON.stringify(res.data))

          Message.success("登录成功")
          router.push({
            path: "/layout"
          })
        }

      }

      //   this.$Message.success("Success!");
    } else {

      //   this.$Message.error("Fail!");
    }
  });
};
const register = () => {
  if (type.value == "login") {
    type.value = "register";
    rules = {
      username: [
        {
          required: true,
          message: "请输入用户名...",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码...",
          trigger: "blur",
        },
      ],
      repassword: [
        {
          required: true,
          message: "请输入确认密码...",
          trigger: "blur",
        },
      ],
    };
  } else {
    type.value = "login"
    formLeft = reactive({
      username: "",
      password: "",
      repassword: "",
    })
    rules = {
      username: [
        {
          required: true,
          message: "请输入用户名...",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码...",
          trigger: "blur",
        },
      ],
    };
  }
  console.log(type.value, "typevalue");
};
</script>
<style>
.labell .ivu-form-item-content {
  margin-left: 0px !important;
}
</style>
<style scoped>
.texttip span {
  cursor: pointer;
}

.texttip {
  margin-top: 10px;
  text-align: right;
  color: #79bbff;
  font-size: 16px;
}

.loginglobal {
  width: 100%;
  height: 100%;
  background: #79bbff !important;

  position: relative;
  border: 0.01px dashed;
}

.loginform {
  width: 350px;
  height: auto;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
  margin: 150px auto 0px auto;
}

.formtitle {
  text-align: center;
  color: #000;
  font-size: 20px;
  margin-bottom: 20px;
}
</style>
